﻿<script language="javascript" type="text/javascript">
    $(document.body).ready(function () {
        InitSwitchObj();
    });
    function InitSwitchObj() {
        IMGLIST = $("#IMG_UL_LIST_1");
        IMGINDEX = $("#IMG_INDEX_UL_LIST_1");
        MAXINDEX = IMGLIST.find("li").length;
        currIndex = 0;
        currImgIndex = IMGINDEX.find("li:eq(" + currIndex + ")");
        currImgLi = IMGLIST.find("li:eq(" + currIndex + ")");
        currImgLi.show();
        interValTime = 3000;
        fadeInTime = 800
        fadeOutTime = 1000;
        ImageAutoSwitch();
        ImageManualSwitch();
        ImageStopSwitch();
    }
    //執行時間
    var interValTime = 0;
    //下一張圖片顯示時間
    var fadeInTime = 0;
    //上一張圖片的消失時間
    var fadeOutTime = 0;
    //保存當前圖片定時的對象
    var imageTimer = null;
    //當前的索引
    var currIndex = null;
    //當前圖片的所以
    var currImgIndex = null;
    //當前圖片
    var currImgLi = null;
    //記錄需要切換的圖片集合
    var IMGLIST = null;
    //記錄需要切換的圖片集合的索引。
    var IMGINDEX = null;
    //最大圖片個數
    var MAXINDEX = null;
    //自動定時切換。
    function ImageAutoSwitch() {
        if (imageTimer != null) {
            clearInterval(imageTimer);
        }
        imageTimer = setInterval("IntervalImage()", interValTime);
    }
    //手動切換圖片
    function ImageManualSwitch() {
        IMGINDEX.find("li").each(function (i) {
            $(this).hover(function () {
                if (imageTimer != null) {
                    clearInterval(imageTimer);
                }
                currIndex = i;
                ImageSwitchChange();
            }, function () {
                ImageAutoSwitch();
            });

        });
    }
    //鼠標放到圖片上的換，停止切換
    function ImageStopSwitch() {
        IMGLIST.find("li").each(function () {
            $(this).hover(function () {
                if (imageTimer != null) {
                    clearInterval(imageTimer);
                }
            }, function () {
                ImageAutoSwitch();
            });
        });

    }
    //自动切换图片
    function IntervalImage() {
        currIndex = parseFloat(currIndex);
        currIndex = currIndex + 1;
        //如果切換到最大數量的時候則從頭開始
        if (currIndex >= MAXINDEX) {
            currIndex = 0;
        }
        //將原來的現實圖片索引的背景透明
        ImageSwitchChange();
    }
    //切換圖片的時候，響應的圖片要實現漸變效果
    function ImageSwitchChange() {
        if (currImgIndex != null) {
            currImgIndex.css({ "background-color": "#FFFFFF", "color": "#55331C" });
        }
        currImgIndex = IMGINDEX.find("li:eq(" + currIndex + ")");
        imgLi = IMGLIST.find("li:eq(" + currIndex + ")");
        currImgIndex.css({ "background-color": "#FF6600", "color": "#FFFFFF" });
        if (currImgLi != null) {
            currImgLi.fadeOut(fadeOutTime, function () {
                imgLi.fadeIn(fadeInTime);
            });
        }
        currImgLi = imgLi;
    }
</script>
<div class='img-swith-main'>
    <div class="img-switch">
        <ul id="IMG_UL_LIST_1">
            @for (int i = 1; i <= 6; i++)
            {
                <li>@Html.Partial("_showAd", string.Format("{0}A{1}", Convert.ToInt32(Model) == 1 ? "W" : "S", i))</li>
            }
        </ul>
    </div>
    <div class='img-switch-index'>
        <ul id="IMG_INDEX_UL_LIST_1">
            <li id="li_index_default" style="background-color: #FF6600; color: #FFFFFF">01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
    <div class='img-switch-clear'>
    </div>
</div>
